<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "忘记密码验证码",
  },
}
</route>

<script lang="ts" setup>
import {to} from '@/utils'
import { forgetApi } from '@/api';

const value = ref<string>('');
const value2 = ref<string>('');
function handleChange(event) {
  console.log(event);
}

const columns = ref(['+86', '+87']);
const areaValue = ref('+86');

function handleConfirm({ value }) {
  areaValue.value = value;
}
/* 手机号和验证码 */
const phone = ref('');  
const smsCode = ref('');

onLoad((params) => {
   console.log('params',params);
   phone.value = params.phone
   smsCode.value = params.smsCode
})


const showKeyboard = ref<boolean>(true);

/* 设置密码 */
const setPswFn = async () => {
  try {
    /* 先判断value和value1是否相等 */
    if (value.value !== value2.value) {
      return uni.showToast({
        title: '两次输入密码不一致',
        icon: 'error',
      });  
    } 
    const _res = await forgetApi({ phone: phone.value, newPassword: value.value, smsCode: smsCode.value });
    console.log('_res=>', _res);

    /* 回到登陆页 */
    to('/pages/login/index');
  } catch (e) {
    //TODO handle the exception
  }
};
</script>

<template>
  <view style="min-height: 100vh; background-color: white">
    <div class="login_content">
      <div class="mb-36rpx forgetBox">请输入密码</div>

      <div class="input_content mt-16rpx">
        <wd-input
          v-model="value"
          show-password
          @change="handleChange"
          no-border
          custom-class="input_root"
          placeholder="请输入密码"
        />
      </div>

      <div class="input_content mt-16rpx">
        <wd-input
          v-model="value2"
          show-password
          @change="handleChange"
          no-border
          custom-class="input_root"
          placeholder="请再次输入密码"
        />
      </div>

      <!-- <div
        class="mt-30rpx"
        style="
          width: 100%;
          display: flex;
          justify-content: flex-end;
          color: #ff0800;
          font-size: 28rpx;
        "
      >
        忘记密码?
      </div> -->

      <div class="mt-80rpx">
        <wd-button block size="large" @click="setPswFn">完成</wd-button>
      </div>

      <div
        style="
          position: fixed;
          bottom: 92rpx;
          font-size: 28rpx;
          display: flex;
          justify-content: center;
        "
      >
        <wd-checkbox :modelValue="true" shape="square" />
        <span style="color: #999999"> 已阅读并同意</span>
        <span style="color: #ff0800">《用户协议》《隐私政策》</span>
      </div>
    </div>
  </view>
</template>

<style lang="scss" scoped>
.logo {
  margin-top: 156rpx;
  display: flex;
  justify-content: center;

  font-family: Inter, Inter;
  font-weight: 600;
  font-size: 96rpx;
  color: #000000;
  text-align: left;
  text-transform: none;
}

.login_content {
  margin-top: 240rpx;

  padding-left: 50rpx;
  padding-right: 50rpx;
}

.input_content {
  width: 650rpx;
  height: 102rpx;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  border: 2rpx solid #d9d9d9;

  display: flex;
  align-items: center;
}

.input_root {
  width: 92%;
  padding-left: 4%;
  padding-right: 4%;
}

.forgetBox {
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: 600;
  font-size: 40rpx;
  color: #000000;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
